<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="handleSubmit" :form="form">
      <a-form-item
        label="角色名称"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入角色名称' }]}
          ]"
          name="name"
          placeholder="请输入角色名称" />
      </a-form-item>
      <a-form-item
        label="角色名称"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-model="remark"
          placeholder="请输入角色描述" />
      </a-form-item>
      <a-form-item
        label="角色权限"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-tree
          v-if="treeData.length"
          checkable
          :defaultExpandAll="true"
          v-model="checkedKeys"
          :treeData="treeData"
          v-decorator="[
            'menuIds',
            {rules: [{ required: true, message: '请选择角色权限' }]}
          ]"
          name="menuIds">
          <template slot="custom" slot-scope="item">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </template>
        </a-tree>
      </a-form-item>
      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
      >
        <a-button htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px" @click="$router.go(-1)">返回</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { mapActions } from 'vuex'
import 'font-awesome/css/font-awesome.min.css'
export default {
  name: 'RoleAdd',
  data () {
    return {
      // form
      remark: '',
      form: this.$form.createForm(this),
      checkedKeys: [],
      treeData: []
    }
  },
  mounted () {
    this.ApiMenu()
  },
  methods: {
    ...mapActions(['RoleMenu', 'RoleAdd']),
    ApiMenu (expandedKeys) {
      this.RoleMenu().then((res) => {
        if (res.status === 200 || res.status === '200') {
          console.log(res)
          this.treeData = this.tree(res.data.menuTree)
        } else {
          this.requestFailed(res)
        }
      }).catch(err => this.requestFailed(err))
    },
    tree (treeData) { // 重命名tree字段
      var _this = this
      return treeData.map(function (item) {
        var children = item.children
        var treeNodeProps = {
          icon: item.icon,
          title: item.text,
          key: item.id,
          scopedSlots: { title: 'custom' }
        }
        if (children) {
          return { icon: item.icon,
            title: item.text,
            key: item.id,
            scopedSlots: { title: 'custom' },
            children: _this.tree(children) }
        }
        return treeNodeProps
      })
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.setFieldsValue({ menuIds: this.checkedKeys })
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values)
          this.RoleAdd({
            name: values.name,
            remark: this.remark,
            menuIds: JSON.stringify(this.checkedKeys)
          })
            .then((res) => this.submitSuccess(res))
            .catch(err => this.requestFailed(err))
        }
      })
    },
    submitSuccess (res) {
      if (res.status === 200 || res.status === '200') {
        this.$notification['success']({
          message: '成功',
          description: '添加成功',
          duration: 4
        })
        setTimeout(() => {
          this.confirmLoading = false
        }, 1000)
      } else {
        this.requestFailed(res)
      }
    },
    requestFailed (err) {
      this.$notification['error']({
        message: '错误',
        description: err.message || '请求出现错误，请稍后再试',
        duration: 4
      })
      setTimeout(() => {
        this.confirmLoading = false
      }, 1000)
    }
  }
}
</script>
